<template>
  <view class="detail-container">
    <view class="detail-header">
      <text class="detail-title">{{ pageTitle }}</text>
    </view>
    <view class="detail-content">
      <view class="content-section">
        <rich-text :nodes="pageContent" class="rich-text-content"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '项目介绍',
      pageContent: '暂无详细内容'
    }
  },
  onLoad(options) {
		debugger
    // 接收传递的参数
    if (options.title) {
      this.pageTitle = decodeURIComponent(options.title)
    }
    if (options.content) {
      const content = decodeURIComponent(options.content)
      // 处理HTML内容
      this.pageContent = this.processHtmlContent(content)
    }
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    })
  },
  methods: {
    // 处理HTML内容
    processHtmlContent(content) {
      // 如果内容包含HTML标签，直接返回
      if (content.includes('<') && content.includes('>')) {
        return content
      }
      // 否则将换行符转换为HTML格式
      return content.replace(/\n/g, '<br/>')
    }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.detail-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
}

.detail-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

.detail-content {
  padding: 20px;
}

.content-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.rich-text-content {
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* rich-text 组件内部样式 */
.rich-text-content >>> p {
  margin: 10px 0;
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}

.rich-text-content >>> h1,
.rich-text-content >>> h2,
.rich-text-content >>> h3,
.rich-text-content >>> h4,
.rich-text-content >>> h5,
.rich-text-content >>> h6 {
  margin: 15px 0 10px 0;
  color: #333333;
  font-weight: bold;
}

.rich-text-content >>> ul,
.rich-text-content >>> ol {
  margin: 10px 0;
  padding-left: 20px;
}

.rich-text-content >>> li {
  margin: 5px 0;
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}

.rich-text-content >>> strong,
.rich-text-content >>> b {
  font-weight: bold;
  color: #333333;
}

.rich-text-content >>> em,
.rich-text-content >>> i {
  font-style: italic;
}

.rich-text-content >>> br {
  line-height: 1.6;
}
</style>
